<template>
  <div id="chart-map" class="chart-map" style=""></div>
</template>

<script>
  import axios from 'axios'
  import * as echarts from 'echarts'
  let points = [
    // { name: '长沙', value: [112.98, 28.19], itemStyle: { color: '#ffffff' } }, // 长沙
    { name: '长沙超算中心', value: [112.950434, 28.378962], itemStyle: { color: '#ffffff' } }, // 国家超级计算长沙中心
    { name: '证通云谷数据中心', value: [112.389616, 28.121779], itemStyle: { color: '#ffffff' } }, // 长沙云谷数据中心
    { name: '长沙大数据中心', value: [112.994102, 28.009911], itemStyle: { color: '#ffffff' }, label: { position: 'right' } }, // 长沙大数据中心
    // { value: [111.20, 27.10], itemStyle: { color: '#ffffff' } }, // 邵阳市
    // { value: [111.50, 27.73], itemStyle: { color: '#ffffff' } }, // 娄底市
    // { value: [113.15, 27.43], itemStyle: { color: '#ffffff' } }, // 株洲市
    // { value: [112.55, 27.82], itemStyle: { color: '#ffffff' } }, // 湘潭市
    { name: '湘潭大数据中心', value: [112.556705, 27.736121], itemStyle: { color: '#ffffff' } } // 湘潭市大数据中心
    // { value: [112.60, 26.90], itemStyle: { color: '#ffffff' } }, // 衡阳市
    // { value: [113.13, 28.99], itemStyle: { color: '#ffffff' } }, // 岳阳市
    // { value: [111.69, 29.04], itemStyle: { color: '#ffffff' } }, // 常德市
    // { value: [110.47, 29.32], itemStyle: { color: '#ffffff' } }, // 张家界市
    // { value: [112.00, 28.57], itemStyle: { color: '#ffffff' } }, // 益阳市
    // { value: [113.03, 25.79], itemStyle: { color: '#ffffff' } }, // 郴州市
    // { name: '东江湖大数据中心', value: [113.254496, 25.957046], itemStyle: { color: '#00ffffffEEFF' } }, // 东江湖大数据中心
    // { value: [111.60, 26.13], itemStyle: { color: '#ffffff' } }, // 永州市
    // { name: '华为永州云计算数据中心', value: [111.591413, 26.398892], itemStyle: { color: '#ffffff' } } // 华为永州云计算数据中心
    // { value: [109.97, 27.55], itemStyle: { color: '#ffffff' } }, // 怀化市
    // { value: [109.73, 28.52], itemStyle: { color: '#ffffff' } } // 湘西土家族苗族自治州
  ]
  // var data = [
  //   { name: '长沙市', value: 107 },
  //   { name: '邵阳市', value: 105 },
  //   { name: '娄底市', value: 102 },
  //   { name: '株洲市', value: 72 },
  //   { name: '湘潭市', value: 89 },
  //   { name: '衡阳市', value: 117 },
  //   { name: '岳阳市', value: 110 },
  //   { name: '常德市', value: 139 },
  //   { name: '张家界市', value: 107 },
  //   { name: '益阳市', value: 147 },
  //   { name: '郴州市', value: 97 },
  //   { name: '永州市', value: 78 },
  //   { name: '怀化市', value: 105 },
  //   { name: '湘西土家族苗族自治州', value: 78 }
  // ]

  export default {
    computed: {
      chartOption () {
        return {
          // backgroundColor: '#13297B',
          color: '#ffffff',
          geo: {
            map: 'hunan',
            roam: false,
            zoom: 1.0,
            show: false
          },
          series: [
            // {
            //   type: 'map',
            //   roam: false,
            //   label: {
            //     normal: {
            //       show: false,
            //       textStyle: {
            //         color: '#fff',
            //         // backgroundColor: '#ff0000',
            //         padding: [2, 5, 2, 5],
            //         borderRadius: 2
            //       }
            //     },
            //     emphasis: {
            //       textStyle: {
            //         color: '#ff0000'
            //       }
            //     }
            //   },
            //   itemStyle: {
            //     normal: {
            //       borderColor: '#0068FB',
            //       borderWidth: 1,
            //       areaColor: {
            //         type: 'radial',
            //         x: 0.5,
            //         y: 0.5,
            //         r: 0.8,
            //         colorStops: [{
            //           offset: 0,
            //           color: '#0C3994' // 0% 处的颜色
            //         }, {
            //           offset: 1,
            //           color: '#0C3994' // 100% 处的颜色
            //         }],
            //         globalCoord: true // 缺省为 false
            //       }
            //     },
            //     emphasis: {
            //       areaColor: '#0068FB',
            //       borderWidth: 0.1
            //     }
            //   },
            //   zoom: 1.1,
            //   map: 'hunan' // 使用
            // },
            {
              type: 'effectScatter',
              coordinateSystem: 'geo',
              showEffectOn: 'render',
              show: false,
              zlevel: 1,
              rippleEffect: {
                color: '#ffffff',
                number: 3, // 波纹的数量。
                period: 5, // 动画的周期，秒数。
                scale: 17, // 动画中波纹的最大缩放比例。
                brushType: 'fill' // 波纹的绘制方式，可选 'stroke' 和 'fill'。
              },
              symbolSize: 2,
              zoom: 1,
              // hoverAnimation: true,
              data: points,
              label: {
                // offset: [10, 10],
                // 静态显示时的样式
                normal: {
                  show: true, // 显示地区名称
                  formatter: function (data) { // 显示模板
                    return data.name || ''
                  },
                  textStyle: {
                    color: '#ffffff',
                    fontSize: 12,
                    fontFamily: 'Oxanium',
                    fontWeight: 600,
                    backgroundColor: 'rgba(0,0,0,0.5)',
                    padding: [5, 10, 5, 10],
                    borderRadius: 10
                  },
                  position: 'left' // 显示位置

                },
                // 鼠标悬浮上去的样式
                emphasis: {
                  show: true // 显示地区名称
                  // color: 'red'
                }
              }
            }, // 地图线的动画效果
            {
              type: 'lines',
              zlevel: 2,
              effect: {
                show: true,
                period: 4, // 箭头指向速度，值越小速度越快
                trailLength: 0.4, // 特效尾迹长度[0,1]值越大，尾迹越长重
                symbol: 'pin', // 箭头图标
                symbolSize: 6 // 图标大小
              },
              lineStyle: {
                normal: {
                  color: '#ffffff',
                  width: 2, // 线条宽度
                  opacity: 0.1, // 尾迹线条透明度
                  curveness: 0.3 // 尾迹线条曲直度
                }
              },
              data: [
                { coords: [[112.950434, 28.378962], [112.389616, 28.121779]], lineStyle: { color: '#ffffff', width: 2 } },
                { coords: [[112.950434, 28.378962], [112.556705, 27.736121]], lineStyle: { color: '#ffffff', width: 2 } },
                { coords: [[112.556705, 27.736121], [112.389616, 28.121779]], lineStyle: { color: '#ffffff', width: 2 } },
                { coords: [[112.950434, 28.378962], [112.994102, 28.009911]], lineStyle: { color: '#ffffff', width: 2 } },
                { coords: [[112.950434, 28.178962], [112.389616, 28.121779]], lineStyle: { color: '#ffffff', width: 2 } }
                // { coords: [[112.389616, 28.121779], [113.254496, 25.957046]], lineStyle: { color: '#ffffff', width: 2 } }
              ]
            }
          ]
        }
      }
    },
    async mounted () {
      axios.get('./images/430000_full.json').then(res => {
        echarts.registerMap('hunan', res.data)
        const myChart = echarts.init(document.getElementById('chart-map'))
        myChart.setOption(this.chartOption, true)
      })
    }
  }
</script>

<style lang="scss" scoped>
.chart-map {
    width: 100%;
    height: 700px;
    margin-left: -20px;
}
</style>
